<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="icon" href="pic/favicon.ico" type="image/x-icon">
    <style>
        /* 全局样式 */
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-image: url('./pic/绿色.png');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }

        /* 导航栏 */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            background-color: rgba(255, 255, 255, 0.7);
            padding: 10px 20px;
            height: 60px;
        }

        .navbar a {
            color: #333;
            text-decoration: none;
            font-size: 20px;
        }

        .navbar a:hover {
            color: #007BFF;
        }

        /* 首页链接 */
        .navbar .home {
            font-weight: bold;
        }

        /* 个人日记居中 */
        .navbar .center {
            flex: 1;
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            color: #333;
        }

        /* 右侧链接 */
        .navbar .right-links {
            display: flex;
            gap: 20px;
            align-items: center;
            position: relative;
        }

        /* 用户信息 */
        .user-info {
            font-size: 18px;
            color: #007BFF;
            cursor: pointer;
        }

        /* 注销按钮 */
        .logout-button {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 4px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            font-size: 16px;
            color: #333;
        }

        .logout-button:hover {
            background-color: #f0f0f0;
        }

        /* 鼠标悬停时显示注销按钮 */
        .right-links.logged-in:hover .logout-button {
            display: block;
        }

        /* 内容区域 */
        .content {
            display: flex;
            flex-direction: column;
            margin: 20px auto;
            width: 1210px;
            align-items: center;
        }

        /* 右侧盒子 */
        .right-box {
            width: 1000px;
            height: 550px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            position: relative;
        }

        /* 轮播图容器 */
        .carousel {
            display: flex;
            width: 400%;
            height: 100%;
            transition: transform 0.5s ease;
        }

        /* 轮播图图片 */
        .carousel img {
            width: 25%;
            height: 100%;
            object-fit: cover;
        }

        /* 轮播图控制按钮 */
        .carousel-control {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            border: none;
            padding: 10px;
            cursor: pointer;
            font-size: 18px;
        }

        .carousel-control.prev {
            left: 10px;
        }

        .carousel-control.next {
            right: 10px;
        }

        /* 日记操作按钮容器 */
        .diary-actions {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }

        /* 日记操作按钮 */
        .diary-actions a {
            display: inline-block;
            padding: 10px 20px;
            background-color: #007BFF;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
            font-size: 18px;
            transition: background-color 0.3s ease;
        }

        .diary-actions a:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<div class="navbar">
    <a href="/" class="home">首页</a>
    <div class="center">个人日记</div>
    <div class="right-links" id="right-links">
        <a href="/registration.html">注册</a>
        <span id="login-link">
            <a href="/login.html">登录</a>
        </span>
        <!-- 注销按钮 -->
        <button id="logout-button" class="logout-button">注销</button>
    </div>
</div>

<!-- 内容区域 -->
<div class="content">
    <!-- 右侧盒子 -->
    <div class="right-box">
        <!-- 轮播图 -->
        <div class="carousel" id="carousel">
            <img src="./pic/lunbo1.png" alt="图片1">
            <img src="./pic/lunbo2.png" alt="图片2">
            <img src="./pic/lunbo3.png" alt="图片3">
            <img src="./pic/lunbo4.png" alt="图片4">
        </div>
        <!-- 控制按钮 -->
        <button class="carousel-control prev" onclick="prevSlide()">&#10094;</button>
        <button class="carousel-control next" onclick="nextSlide()">&#10095;</button>
    </div>

    <!-- 日记操作按钮 -->
    <div class="diary-actions">
        <a href="/creatediary.html">新建日记</a>
        <a href="/viewdiary.html">查看日记</a>
    </div>
</div>

<script>
    let currentSlide = 0;
    const totalSlides = 4;
    const carousel = document.getElementById('carousel');

    // 切换到上一张图片
    function prevSlide() {
        currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
        updateCarousel();
    }

    // 切换到下一张图片
    function nextSlide() {
        currentSlide = (currentSlide + 1) % totalSlides;
        updateCarousel();
    }

    // 更新轮播图位置
    function updateCarousel() {
        carousel.style.transform = `translateX(-${currentSlide * 25}%)`;
    }

    // 自动轮播
    setInterval(nextSlide, 2000);

    // 检查用户是否登录
    const loginLink = document.getElementById('login-link');
    const logoutButton = document.getElementById('logout-button');
    const rightLinks = document.getElementById('right-links');
    const user = JSON.parse(localStorage.getItem('user'));

    if (user) {
        // 如果已登录，显示用户 username 和注销按钮
        loginLink.innerHTML = `<span class="user-info">${user.username}</span>`;
        rightLinks.classList.add('logged-in'); // 添加 logged-in 类
    } else {
        // 如果未登录，拦截所有 <a> 标签点击事件
        document.querySelectorAll('a').forEach(a => {
            if (a.href && !a.href.includes('login.html') && !a.href.includes('registration.html')) {
                a.addEventListener('click', (e) => {
                    e.preventDefault(); // 阻止默认跳转
                    window.location.href = 'login.html'; // 跳转到登录页面
                });
            }
        });
    }

    // 注销功能
    logoutButton.addEventListener('click', () => {
        localStorage.removeItem('user'); // 移除用户信息
        window.location.href = 'index.html'; // 跳转到登录页面
    });
</script>
</body>
</html>